<template>
	<view class="body bgf">
		<scroll-view scroll-x="true" class="tab">
			<view v-for="item,index in status.list" class="item t-flex colum" :class="{'active':status.date == index}"
			@click="change('date',index)"
			>
				<view class="f36 bold">
					{{item.time_to_day}}
				</view>			
			</view>
		</scroll-view>
		<view class="content bgf p30 t-flex wrap between">
			<view class="item t-flex colum center mb20" v-for="item,index in status.timeList" :key="index"
			:class="['','ge','ye','ye'][getStatus(index)]"
			>
				<view >{{item}}</view>
			</view>
		</view>
		
		<view class="colors t-flex pl30">
			<view class="item gr t-flex f24">
				<view class="round"></view>
				<view>不可预约</view>
			</view>
			<view class="item ge t-flex f24">
				<view class="round"></view>
				<view>可选</view>
			</view>
			<view class="item ye t-flex f24">
				<view class="round"></view>
				<view>已被预约</view>
			</view>
		</view>
	</view>
	
	
	
	
	<view class="tips t-flex between">
		<image src="../../../static/icons/27.png" mode="aspectFit" class="icon2"></image>
		<view class="c6 right">
			提示：第一次设置时间模板根据模板自动生成之后3天的可预约日期,每天0:01根据您设置的时间模板生成当天之后3天的可预约日期,生成之后的日期不可更改
		</view>
	</view>
	
	<view class="bottom t-flex center safeArea bgf">
		<view class="bottomcontent t-flex center">
			<view class="btn t-flex center s1" @click="temmodel.show = true">
				模板设置
			</view>
<!-- 			<view class="btn t-flex center s2">
				提交
			</view> -->
		</view>
	</view>
	
	
	<u-popup mode="bottom" v-model="temmodel.show" closeable border-radius="20" safeAreaInsetBottom>
		<view class="pop">
			<view class="title t-flex center f30 bold pt30 mb20">请选择每日可预约时间</view>
			
			<view class="content bgf p30 t-flex wrap between">
				<view class="item t-flex colum center mb20" v-for="item,index in status.timeList" :key="index"
				@click="temmodel.change(index)"
				:class="{'active':temmodel.active.includes(index)}"
				>
					<view >{{item}}</view>
				</view>
			</view>
			<view class="confirm t-flex center cf f30 " @click="temmodel.confirm">
				保存模板
			</view>
		</view>
	</u-popup>
	
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getTime, showToast } from '../../../lib/ts/util';
import { getSfTime, getTimeTemplate, setTimeTemplate } from '../../../api';
import { onLoad } from "@dcloudio/uni-app"
import { useStore } from '../../../store';
	
	
	const store = useStore()
	
	
	onLoad(()=>{
		temmodel.init()
		status.init()
	})
	
	
	const change = (key,e)=>{
		if(key == 'date'){
			status[key]  = e
		}
	}
	
	
	
	let status = reactive({
		date:0,
		time:-1,
		dateList:[],
		timeList:[],
		list:[],
		async init(){
			let now = +new Date()
			let end = getTime((now+(86400000*10))/1000 ,2)
			let start = getTime(now/1000,2)
			let res = await getSfTime({user_id:store.userinfo.id,s_day:start,e_day:end})
			status.list = res
		}
	})
	
	
	const getTimeList = ()=>{
		let arr = []
		let arr2 = []
		let now = new Date().getHours()
		for(let i =0;i<24;i+=1){
			
			let h = (i+'').padStart(2,'0')
			let nexth = (i+1+'').padStart(2,'0')
			if(i>now){
				arr2.push(`${h}:00-${nexth}:00`)
			}
			arr.push(`${h}:00-${nexth}:00`)
		}
		status.timeList = arr
	}
	getTimeList()


	let temmodel = reactive({
		show:false,
		active:[],
		change(index:number){
			if(temmodel.active.includes(index)){
				temmodel.active = temmodel.active.filter(item=>item != index)
			}else{
				temmodel.active.push(index)
			}
		},
		async confirm(){
			let arr = temmodel.active.map(item=>{
				return status.timeList[item]
			})
			if(arr.length){
				let res = await setTimeTemplate({time_content:arr})
				uni.$emit('checkWorkerInfo')
				showToast(res.msg)
				temmodel.show = false
				temmodel.init()
				status.init()
				getserverPush()
			}else{
				showToast('请选择时间')
			}
		},
		 async init(){
			let res = await getTimeTemplate()
			let timecontent = JSON.parse(res.time_content)
			status.timeList.forEach((item,index)=>{
				if(timecontent.includes(item)){
					temmodel.active.push(index)
				}
			})
		}
	})
	
	
	//判断状态
	const getStatus = (index)=>{
		let target = status.list[status.date]?.timedate.find(item=>status.timeList[index] == `${item.s_time}-${item.e_time}`)
		if(target){
			return +target.status
		}else{
			return 0
		}
	}
	

	

</script>

<style scoped lang="scss">
	.body{
		min-height: 100vh;
	}
	.tab{
		background-color: #E40417;
		padding-top: 28rpx;
		white-space: nowrap;
		.item{
			display: inline-flex;
			color: #fff;
			padding: 14rpx 40rpx;
			margin-left: 30rpx;
			border-radius: 12rpx 12rpx 0 0 ;
		}
		.item.active{
			background-color: #fff;
			color: $main-color;
		}
	}
	
	.colors{
		.round{
			width: 22rpx;
			height: 22rpx;
			margin-right: 20rpx;
		}
		.item{
			margin-right: 60rpx;
		}
		.item.gr{
			color: #333;
			.round{
				background-color: #D8D8D8;
			}
		}
		.item.ge{
			color: #16D46B;
			.round{
				background-color: #16D46B;
			}
		}
		.item.ye{
			color: #FFAC00;
			.round{
				background-color: #FFAC00;
			}
		}
	}
	
	.content{
		.item{
			width: 160rpx;
			height: 90rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid #F2F2F2;
			font-size: 24rpx;
			color: #666;
		}
		.item.active{
			background: #FFE2E5;
			border: 2rpx solid $main-color;
			color: $main-color;
		}
		.item.disabled{
			color: #C1C1C1;
		}
		.item.ge{
			color: #16D46B;
			border-color: #16D46B;
		}
		.item.ye{
			color: #FFAC00;
			border-color: #FFAC00;
		}
		.distext{
			margin-top: 4rpx;
		}
	}
	
	
	.bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx #EDEDED;
		.bottomcontent{
			padding: 24rpx 30rpx;
			width: 100%;
			.btn{
				width: 330rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				box-sizing: border-box;
				margin-left: 24rpx;
			}
			.s1{
				background: $main-color-opcity1;
				color: $main-color;
			}
			.s2{
				background-color: $main-color;
				color: #fff;
			}
		}
	}
	
	.tips{
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 8rpx;
		align-items: flex-start;
		position: fixed;
		bottom: 20vh;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 20;
		padding: 26rpx 32rpx;
		.icon2{
			width: 28rpx;
			height: 28rpx;
		}
		.right{
			width: calc(100% - 42rpx);
			margin-top: -4rpx;
		}
	}
	
	.confirm{
		background-color: $main-color;
		width: 600rpx;
		border-radius: 200rpx;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	
	
</style>
